<template>
  <div class="mycard">
    <div
      style="display: flex;flex-direction: column;justify-content: space-between;padding: 1.3125rem;box-sizing: border-box;background: #fff; height: auto; margin-bottom: 10px;"
    >
      <div
        style="min-height: 17.78125rem;display: flex;flex-direction: column;justify-content: space-between;"
      >
        <!-- 第一块 -->
        <div style="margin: 0.875rem 0 1.28125rem 0;">
          <p style="font-size: 1.25rem; color: #333; font-weight: bold;">
            绑定信息
          </p>
          <p style="font-size: 0.9375rem; white-space: nowrap;">
            查询到您的好勒卡信息为:
          </p>
        </div>
        <!-- 第二块 -->
        <div class="wrapper">
          <div class="card">
            {{ strictName }}街道 {{ communityName }}
            {{ villageData.villageName }} {{ villageData.buildingNo }}栋{{
              villageData.unitNo
            }}单元 {{ villageData.houseNumber }}室
            <span class="myafter"></span>
          </div>
          <p class="cardno">卡号：{{ villageData.qrCode }}</p>
        </div>

        <!-- <div class="wrapper">
          <div class="card">
            江干街道 星都 城中花园 1栋1单元 101室
            <span class="myafter"></span>
          </div>
          <p class="cardno">卡号：326736987123916981782</p>
        </div> -->

        <!-- 第三块 -->
        <p class="memo">请仔细核对卡片信息,一经绑定暂时无法解绑</p>
      </div>

      <!-- <button class="btn" @click="submit">
        下一步
      </button> -->
    </div>

    <form
      class="form"
      style="padding: 32px 22px 0 22px; box-sizing: border-box; display: flex;flex-direction: column; justify-content: flex-start; background: #fff;"
      action=""
    >
      <!-- <p style="font-weight: Bold; font-size: 18px;">新用户注册</p> -->
      <!-- <p style="font-size: 15px;">未查询到您的好嘞卡信息，请先注册：</p> -->
      <p class="after" style="margin: 0; padding: 0; margin-bottom: 35px;">
        <label
          for="username"
          style="display: block;margin-bottom: 20px; font-size: 12px;"
          >您的名字
        </label>
        <input
          style="border:none;  outline: none; width: 100%; font-size:16px; padding-bottom: 10px;"
          type="text"
          id="username"
          placeholder="请输入您的名字"
          v-model="name"
        />
      </p>

      <p class="after" style="margin: 0; padding: 0; margin-bottom: 35px;">
        <label
          for="mobile"
          style="display: block;margin-bottom: 20px; font-size: 12px;"
          >您的手机号
        </label>
        <input
          style="border:none;  outline: none; width: 100%; font-size:16px; padding-bottom: 10px;"
          type="text"
          id="mobile"
          placeholder="请输入您的手机号"
          maxlength="11"
          v-model="mobile"
        />
      </p>

      <p class="lastAfter" style="margin: 0; padding: 0; margin-bottom: 35px;">
        <label
          for="captcha"
          style="display: block;margin-bottom: 20px; font-size: 12px;"
          >验证码
        </label>

        <span style="display: flex;justify-content:space-between;">
          <input
            style="width: 50%;border:none;outline: none;font-size:16px; padding-bottom: 10px;"
            type="text"
            id="captcha"
            placeholder="请输入验证码"
            maxlength="6"
            v-model="captchaKey"
          />
          <span
            @click="getVerification"
            style="width: 50%;background: #40AE36; display: inline-block; height:45px; border-radius: 22.5px; color: #fff;line-height: 45px; text-align: center; font-size: 15px;"
            >{{ captcha }}</span
          >
        </span>
      </p>

      <p style="margin: 0;  padding-bottom: 1.5625rem;margin-top: 10.625rem;">
        <button
          style="border:none;background-color:#40AE36; display: block;width: 100%; height: 45px; border-radius: 22.5px;color: #fff; font-size: 18px; outline: none;"
          @click="submit"
        >
          确认绑定
        </button>
      </p>
    </form>
  </div>
</template>
<script>
export default {
  name: "mycard",
  data() {
    return {
      name: "",
      mobile: "",
      captchaKey: "",
      captcha: "验证码",
      timer: "",

      strictName: "",
      communityName: "",
      villageData: {}
    };
  },

  created() {
    // localStorage.setItem("pageName", "mycard");

    console.log(this.$route);
    this.initCard(this.$route.query);
  },
  methods: {
    getVerification() {
      var timer = this.timer;
      if (timer) {
        return;
      }

      // 正则匹配
      if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
        this.$toast({
          message: "手机号码有误，请重填!",
          position: "middle",
          duration: 1500
        });
        return;
      }

      var captcha = 60;
      timer = setInterval(() => {
        captcha--;
        if (captcha < 0) {
          clearInterval(timer);
          this.timer = "";
          this.captcha = "验证码";
          return;
        }
        this.captcha = captcha;
      }, 1000);

      this.timer = timer;

      this.$axios
        .get("/village/household/send", {
          params: { mobile: this.mobile }
        })
        .then(({ data: res }) => {
          console.log("验证码", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
            return;
          }

          this.$toast({
            message: "发送成功",
            position: "middle",
            iconClass: "mintui mintui-success", // (图标需自行准备）
            duration: 1500
          });
          // 获取到验证码
          // this.captchaKey = res.data
        })
        .catch(() => {});
    },
    initCard(data) {
      this.strictName = data.strictName;
      this.communityName = data.communityName;
      this.villageData = data.data;
    },
    // // 下一步
    // submit() {

    //   this.$router.push({
    //     name: "confirmbind",
    //     params: {
    //       id: this.villageData.id
    //     }
    //   });
    // }

    // 立即绑定
    submit(e) {
      var event = e || window.event;
      this.cancelHandler(event);

      if (!this.name.trim()) {
        return this.$toast({
          message: "请输入名字",
          position: "middle",
          duration: 1500
        });
      }
      if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
        this.$toast({
          message: "手机号码有误，请重填!",
          position: "middle",
          duration: 1500
        });
        return;
      }
      if (!this.captchaKey.trim()) {
        this.$toast({
          message: "请输入验证码",
          position: "middle",
          duration: 1500
        });
        return;
      }

      this.$axios
        .post("/village/household/save", {
          openId: localStorage.getItem("openId"),
          name: this.name,
          mobile: this.mobile,
          // id: this.$route.params.id,
          id: this.villageData.id,
          captchaKey: this.captchaKey
        })
        .then(({ data: res }) => {
          console.log("确定绑定后的数据", res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500
            });
          }
          this.name = "";
          this.mobile = "";
          this.captchaKey = "";

          this.$router.replace({
            path: "/qrcode",
            query: { success: true }
          });
        })
        .catch(() => {});
    },
    cancelHandler(event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    }
  }
};
</script>
<style lang="scss">
// $color-primary: #fff;
// .mint-header {
//   background-color: $color-primary;
//   color: #333;
//   font-weight: Bold;
//   font-size: 18px;
//   height: 58px;
// }
.mycard {
  background: #f6f6f6;
  width: 100%;
  // height: 100%;

  height: auto;
  box-sizing: border-box;
}
p {
  margin: 0;
  padding: 0;
}
.wrapper {
  margin-bottom: 2.125rem;
}
.card {
  width: 100%;
  height: 6.15rem;
  background: #40ae36;
  border-radius: 0.625rem 0.625rem 0.3125rem 0.3125rem;
  position: relative;
  color: #fff;
  padding: 1.1875rem;
  box-sizing: border-box;
}
.card .myafter {
  display: block;
  width: 95%;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.cardno {
  background: #40ae36;
  width: 100%;
  height: 2.93125rem;
  line-height: 2.93125rem;
  border-radius: 0.3125rem 0.3125rem 0.625rem 0.625rem;
  color: #fff;
  text-align: left;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0.875rem;
  padding-left: 1.1875rem;
}

.memo {
  padding-left: 2rem;
  box-sizing: border-box;
  font-size: 0.75rem;
  color: #666;
  //   margin-top: 8.359375rem;
  position: relative;
}
.memo::before {
  content: "";
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  background-color: #cacaca;
  border-radius: 50%;
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
}
.btn {
  border: none;
  background-color: #40ae36;
  display: block;
  width: 100%;
  height: 45px;
  border-radius: 22.5px;
  color: #fff;
  font-size: 18px;
  outline: none;
  margin-top: 14.90625rem;
}

.form {
  background: #fff;
  //   height: 100%;
  color: #333;
}
.after::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.lastAfter {
  // display: flex;
  // justify-content: space-between;
}
.lastAfter::after {
  content: "";
  display: block;
  width: 52%;
  //
  border-bottom: 1px solid #eee;
}
input {
  padding: 0;
}
</style>
